<template>
  <div>
    <common-head :title="$route.name"/>
    <div class="container">
      <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field v-model="contact.linkMan" :rules = "
            [
              {
                required: true,
                message: '必须输入姓名'
              }
            ]
          " label="姓名" placeholder="请输入收货人姓名" />
        <van-field
          v-model="contact.mobile"
          :rules = "
            [
              {
                pattern: /\d{11}/,
                message: '请输入11位手机号'
              }
            ]
          "
          type="tel" label="手机号" placeholder="请输入收货人手机" />
        <van-field  label="地区" :value="areaStr" @click-input="showArea=true" readonly placeholder="选择省/市/区" />
         <van-field v-model="contact.address" label="详细地址" placeholder="请输入收货人详细地址" />
        <van-field v-model="contact.code" maxlength="6" type="number" label="邮政编码" placeholder="请输入邮政编码" />
        <van-cell center title="是否为默认地址">
          <template #right-icon>
            <van-switch v-model="contact.isDefault" size="24" />
          </template>
        </van-cell>
      </van-cell-group>
        <van-button size="large" native-type="submit" type="danger" round>确定</van-button>
      </van-form>
      <van-button size="large" @click="delContact"  round>删除</van-button>
      <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
        <van-area @confirm="choseArea" @cancel="showArea=false" title="选择省市区" :area-list="areaList" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { areaList } from '@vant/area-data'
import { getContactInfo, updateAddress, delContact } from '_api'
import { getToken } from '_utils'
import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      areaList,
      contact: {
        address: '',
        cityId: '',
        linkMan: '',
        mobile: '',
        provinceId: '',
        code: '',
        isDefault: false
      },
      showArea: false,
      areaStr: ''
    }
  },
  created () {
    this.fetchContact()
  },
  methods: {
    delContact () {
      // 删除联系人
      Dialog.confirm({
        title: '删除收货人',
        message: '您确认删除嘛'
      })
        .then(() => {
          delContact({
            id: this.$route.query.contactId,
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              Toast.success({
                message: '删除成功',
                duration: 1000,
                onClose: () => {
                  this.$router.replace('/addressList')
                }
              })
            }
          })
        })
    },
    fetchContact () {
      // 获取收货人详情
      getContactInfo({
        token: getToken(),
        id: this.$route.query.contactId
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.contact = res.data.data.info
          this.areaStr = this.contact.provinceStr + '/' + this.contact.cityStr
        }
      })
    },
    onSubmit () {
      // 更新联系人
      updateAddress({
        token: getToken(),
        ...this.contact
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success({
            message: '修改成功',
            duration: 1000,
            onClose: () => {
              this.$router.replace('/addressList')
            }
          })
        }
      })
    },
    choseArea (params) {
      // 省市区三级联动确认
      const areaStrs = []
      params.forEach(area => {
        areaStrs.push(area.name)
      })
      this.areaStr = areaStrs.join('/')
      this.contact.provinceId = params[0].code
      this.contact.cityId = params[1].code
      this.showArea = false
    }
  },
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>
.container{
  padding-top: 46px;
}
</style>
